<!--
 * @Author: Zhong admin@51y.cc
 * @Description: $1
 * @FilePath: /tenement-admin/src/views/realEstateManage/roomList/addEdit.vue
 * @LastEditTime: 2024-10-26 16:49:36
 * @LastEditors: Zhong
-->
<template>
  <el-dialog
    title="生成费用"
    v-model="model"
    width="600px"
    :before-close="closeHandle"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.type === 2" label="指定月份" prop="monthList">
        <el-select v-model="form.monthList" multiple placeholder="请选择">
          <el-option
            v-for="item in monthList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template v-slot:footer>
      <div>
        <el-button @click="closeHandle">取 消</el-button>
        <el-button type="primary" @click="submitForm">生 成</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, toRaw } from "vue";
import { ElMessage } from "element-plus";
import { batchParkingBill } from "@/api/realEstateManage";
const props = defineProps({
  ids: {
    type: Array,
    default: () => [],
  },
});

const formRef = ref();

const emit = defineEmits(["submit"]);
const model = defineModel({
  default: false,
});

const form = ref({
  communityId: "",
  type: "",
});

const rules = reactive({
  type: [{ required: true, message: "请选择类型" }],
  monthList: [{ required: true, message: "请选择生成的月份" }],
});

const typeList = ref([
  {
    label: "当月",
    value: 0,
  },
  {
    label: "全年",
    value: 1,
  },
  {
    label: "指定月份",
    value: 2,
  },
]);
const monthList = ref(
  new Array(12).fill(0).map((item, index) => {
    return {
      label: `${index + 1}月`,
      value: index + 1,
    };
  })
);

onMounted(() => {});

const closeHandle = () => {
  model.value = false;
};

const submitForm = () => {
  const params = {
    parkingIds: props.ids.map((item) => item.id),
    type: form.value.type,
  };
  if (form.value.type === 2) {
    params.monthList = form.value.monthList;
  }
  batchParkingBill(params).then(({ data }) => {
    if (data) {
      ElMessage.success("生成账单成功");
      emit("submit");
      closeHandle();
    } else {
      ElMessage.error("生成账单失败");
    }
  });
};
</script>

<style scoped>
.el-input-number {
  width: 100%;
}
</style>
